<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模块管理</title>
    <link href="static/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/plugins/bootstrap-table/bootstrap-table.css" rel="stylesheet">
    <link href="static/plugins/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="static/css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="static/css/public.css">
    <!-- jquery 提示插件css -->
    <link href="static/plugins/toastr.min.css" rel="stylesheet">
    <!--jstree-->
    <link rel="stylesheet" href="static/plugins/jstree/dist/themes/default/style.css">
</head>
<body style="background-color: #f3f3f4;">
<div style="margin-top: 10px;" id="content">
    <!--table 表格-->
    <div class="float-clear">
        <div class="float-left contentBox border-all" style="width:18%;margin: 0 0.5%;">
            <div class="content-title border-bottom">
                <span>模块管理</span>
            </div>
            <div class="content-center">
                <p class="text-center" v-if="leftTreeLoading">正在加载中,请稍后.....</p>
                <p class="text-center" v-if="!leftTreeLoading && leftTreeList.length==0">暂时没有数据,请添加</p>
                <div id="leftTree"></div>
            </div>
        </div>
        <div class="float-left contentBox border-all" style="width:80.5%;">
            <!--<table id="table"></table>-->
            <div class="content-title border-bottom">
                <span>{{leftTreeName.name}}</span>
            </div>
            <div class="content-center">
                <div class="ibox-content" style="position: relative;">
                    <button class="btn btn-default pull-right my-btn my-btn-add" onclick="permissionBenClick()">按钮
                    </button>
                    <button class="btn btn-default pull-right my-btn my-btn-remove" onclick="deleteBtnClick()">删除
                    </button>
                    <button class="btn btn-default pull-right my-btn my-btn-pencil" onclick="editBenClick()">编辑</button>
                    <button class="btn btn-default pull-right my-btn my-btn-add" onclick="addBtnClick()">添加</button>
                    <button class="btn btn-primary" style="position:absolute;top: 26px;left: 222px;"><span class="fa fa-search" style="margin-right: 4px"></span>查询</button>
                    <button class="btn btn-default pull-right my-btn" type="button" style="width: 40px;text-align: center;padding:6px 10px" onclick="search()">
                        <i class="glyphicon glyphicon-refresh"></i>
                    </button>
                    <table id="table"
                           data-toggle="table"
                           data-toolbar=".toolbar"
                           data-search="true"
                           data-search-align="left"
                           data-toolbar-align="right">
                        <thead>
                        <tr>
                            <th data-width="50" data-field="code">编码</th>
                            <th data-field="name">名称</th>
                            <th data-field="url">地址</th>
                            <th data-field="target">目标</th>
                            <th data-width="50" data-field="is_menu" data-align="center"
                                data-formatter="checkBoxFormatter">菜单
                            </th>
                            <th data-width="50" data-field="is_expand" data-align="center"
                                data-formatter="checkBoxFormatter">展开
                            </th>
                            <th data-width="50" data-field="is_public" data-align="center"
                                data-formatter="checkBoxFormatter">公共
                            </th>
                            <th data-width="50" data-field="status" data-align="center"
                                data-formatter="checkBoxFormatter">有效
                            </th>
                            <th data-field="description">描述</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!--添加 编辑 模态框-->
    <div id="modal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">{{modalType}}功能</h4>
                </div>
                <div class="modal-manage">
                    <div class="form-group col-xs-6">
                        <div class="manage-title">
                            <span>编码<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <input type="text" class="form-control form-manage" placeholder="请输入编码"
                               v-model="modalData.code">
                    </div>
                    <div class="form-group col-xs-6">
                        <div class="manage-title">
                            <span>名称<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <input type="text" class="form-control form-manage" placeholder="请输入名称"
                               v-model="modalData.name">
                    </div>
                    <div class="form-group col-xs-6">
                        <div class="manage-title">
                            <span>上级：</span>
                        </div>
                        <input id="company" class="form-control form-manage" autocomplete="off"
                               v-model="modalDataParentName.name"
                               placeholder="===请选择===">
                        <div id="modalZTree" class="modalZTree border-all" style="left: 80px;width: 186px;"></div>
                    </div>
                    <div class="form-group col-xs-6" style="position: relative">
                        <div class="manage-title">
                            <span>图标：</span>
                        </div>
                        <input type="text" class="form-control form-manage" id="icon">
                        <i id="icon2" v-bind:class="modalData.icon"
                           style="position: absolute;left: 95px;top: 8px;font-size: 14px;color: #666"></i>
                    </div>
                    <div class="form-group col-xs-6">
                        <div class="manage-title">
                            <span>目标<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <select class="form-control form-manage" style="padding: 0;" v-model="modalData.target">
                            <option value="===请选择===">===请选择===</option>
                            <option value="expand">expand</option>
                            <option value="iframe">当前页面打开</option>
                            <option value="open">开启新页面</option>
                        </select>
                    </div>
                    <div class="form-group col-xs-6">
                        <div class="manage-title">
                            <span>排序<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <input type="number" class="form-control form-manage" placeholder="请输入排序号"
                               v-model="modalData.dis_order">
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span>地点：</span>
                        </div>
                        <input type="text" class="form-control form-manage form-manage2" placeholder="请输入URL地址"
                               v-model="modalData.url">
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span>选项：</span>
                        </div>
                        <div class="pull-left" style="margin-top: 3px;">
                            <label style="margin-right: 5px;cursor: pointer;">
                                <input id="F_IsMenu" type="checkbox" v-model="modalData.is_menu"
                                       @click="changeCheck(modalData.is_menu)">
                                菜单
                            </label>
                            <label style="margin-right: 5px;cursor: pointer;">
                                <input id="F_AllowExpand" type="checkbox" v-model="modalData.is_expand"
                                       @click="changeCheck(modalData.is_expand)">
                                展开
                            </label>
                            <label style="margin-right: 5px;cursor: pointer;">
                                <input id="F_IsPublic" type="checkbox" v-model="modalData.is_public"
                                       @click="changeCheck(modalData.is_public)">
                                公共
                            </label>
                            <label style="margin-right: 5px;cursor: pointer;">
                                <input id="F_EnabledMark" type="checkbox" v-model="modalData.status"
                                       @click="changeCheck(modalData.status)">
                                有效
                            </label>
                        </div>
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span>描述：</span>
                        </div>
                        <textarea class="form-control form-manage form-manage2" style="resize: none"
                                  v-model="modalData.description"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary submit" onclick="add()">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!--删除 模态-->
    <div id="deleteModal" class="modal fade">
        <div class="modal-dialog" style="width: 400px;">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" style="float: left;">温馨提示</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-manage">
                    <img src="static/image/delete.png" alt="" style="float: left;margin-left: 20px">
                    <h3 class="text-center" style="float: left;margin-top: 57px;margin-left: 40px">是否删除当前项</h3>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary submit" onclick="deleteTable()">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!--权限模态-->
    <div id="permissionsModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">添加按钮</h4>
                </div>
                <div class="modal-manage">
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span>上级：</span>
                        </div>
                        <input id="addPermissionInput" class="form-control form-manage2" autocomplete="off"
                               v-model="permissionsModalParentName" placeholder="===请选择===">
                        <ul id="permissionTree" class="ztree modalZTree border-all" style="width: 480px;"></ul>
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span>编号<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <input type="text" class="form-control form-manage2" placeholder="请输入名称">
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span>名称<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <input type="text" class="form-control form-manage2" placeholder="请输入名称">
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span>排序<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <input type="text" class="form-control form-manage2" placeholder="请输入名称">
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span>地址：</span>
                        </div>
                        <input type="text" class="form-control form-manage2" placeholder="请输入名称">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary submit" onclick="add()">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!--图标模态框-->
    <div id="iconModal" class="modal fade">
        <div class="modal-dialog" style="width: 800px!important;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">图标</h4>
                </div>
                <div class="modal-manage" style="height:700px;">
                    <iframe id="iconIframe" src="fontIcon.html" width="100%" height="100%" frameborder="0" seamless></iframe>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</div>

<!-- 主要的脚本 -->
<script src="static/js/jquery-3.1.1.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/plugins/bootstrap-table/bootstrap-table.js"></script>
<script src="static/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<!-- Toastr -->
<script src="static/plugins/toastr/toastr.min.js"></script>
<!--jstree-->
<script src="static/plugins/jstree/dist/jstree.min.js"></script>
<!-- 定制的javascript和插件 -->
<script src="static/js/ga.js"></script>
<script src="static/js/vue.min.js"></script>
<!--公共服务插件-->
<script src="static/js/publicServe.js"></script>
<script>
    //Vue 实例化
    var vm = new Vue({
        el: '#content',
        data: {
            leftTreeLoading: true,               //左侧树结构加载判断
            leftTreeList: [],                    //左侧树结构值
            tableList: [],                       //table中list结构数据
            searchText:'',                      //table搜索
            leftTreeName: {
                name: "模块列表"
            },              //点击左侧树结构获取到的值
            modalDataParentName: {
                id: null,
                name: ''
            },               //模态中选定树的名称
            permissionsModalParentName: '',     //添加权限模态中选定树的名称
            modalType: '添加',                   //模态框修改的类型 添加|编辑
            modalData: {                         //模态输入框中的值
                code: '',                        //编号
                name: '',                        //名称
                ParentId: '',                      //父id
                description: '',                 //描述
                target: '',                      //目标 跳转方式
                icon: 'fa fa-folder-o',         //图标
                url: '',                         //地址
                dis_order: null,                 //排序优先级
                is_menu: false,                      //菜单
                is_expand: false,                    //展开
                is_public: false,                    //是否公开
                status: true,                       //当前状态
            },
        },
        methods: {
            //选择模态 菜单 状态
            changeCheck: function (item) {
                item = !item;
            }
        }
    });
    // 图标input点击
    $('#icon').focus(function () {
        $("#iconModal").modal('show');
    });
    //iframe点击
    $("#iconIframe").on("load", function(event){
        $(".fa-hover",this.contentDocument).click(function(){
            $("#iconModal").modal('hide');
            var icon = $(this).find('i').attr('class');
            $('#icon2').removeClass().addClass(icon);
            vm.modalData.icon = icon;
        });
    });
    //列表模态中选择 '上级' 点击  触发树结构
    $('#company').click(function () {
        $("#modalZTree").slideToggle("fast");
        $("body").bind("mousedown", onBodyDown);
    });
    //权限模态中选择 '上级' 点击  触发树结构
    $('#addPermissionInput').click(function () {
        $("#permissionTree").slideToggle("fast");
        $("body").bind("mousedown", onBodyDown2);
    });
    //点击除模态中的zTree外 关闭zTree
    function onBodyDown(event) {
        if (!(event.target.id == "modalZTree" || $(event.target).parents("#modalZTree").length > 0)) {
            $("#modalZTree").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }
    }
    //点击按钮除模态中的zTree外 关闭zTree
    function onBodyDown2(event) {
        if(!(event.target.id == "permissionTree" || $(event.target).parents("#permissionTree").length > 0)){
            $("#permissionTree").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown2);
        }
    }
    //绘制table
    var myTable = new MyTable('table','get','');
    // table点击事件
    $('#table').on('click-row.bs.table', function (r, row, element) {
        vm.modalData = copyFun(row)
    });
    //获取Tree信息
    function getTree() {
        vm.leftTreeLoading = true;
        $.ajax({
            url: 'http://172.16.202.224:8080/core/module/get_tree/',
            type: 'post',
            dataType: "json",
            data: '',
            async: true,
            contentType: "application/json",
            success: function (response) {
                if (response && response.success == 1) {
                    vm.leftTreeLoading = false;
                    //添加编辑模态中树绘制
                    modalZTree = new MyTree('modalZTree',"themes",response.data,function (node) {
                        //为 modalData.parent 赋值
                        vm.modalDataParentName.name = node.name;
                        vm.modalDataParentName.id = Number(node.id);
                        vm.modalData.ParentId = Number(node.id);
                    });
                    //权限模态中树绘制
                    permissionTree = new MyTree('permissionTree',"themes",response.data,function (node) {
                        vm.permissionsModalParentName = node.name;
                    });
                    vm.leftTreeList = response.data;
                    //绘制第一个树的table 和表格title
                    if(vm.leftTreeList[0]){
                        myTable.refresh('http://172.16.202.224:8080/core/module/get_children_by_module_id/?pid='+vm.leftTreeList[0].id);
                        vm.leftTreeName = {
                            id: vm.leftTreeList[0].id,
                            name: '所有模块'
                        };
                        vm.modalDataParentName.name = vm.leftTreeList[0].name;
                        vm.permissionsModalParentName = vm.leftTreeList[0].name;
                    }
                    vm.leftTreeList[0].name='所有模块';
                    //左边树绘制
                    leftTree = new MyTree('leftTree',"themes",vm.leftTreeList,function (node) {
                        //将表格title改变
                        vm.leftTreeName = {
                            id: node.id,
                            name: node.name
                        };
                        vm.modalDataParentName.name = node.name;
                        //绘制table
                        myTable.refresh('http://172.16.202.224:8080/core/module/get_children_by_module_id/?pid='+node.id)
                    });
                } else {
                    toastr.info(response.error_msg);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                switch (XMLHttpRequest.status) {
                    case(500):
                        toastr.info('服务器系统内部错误');
                        break;
                    case(403):
                        toastr.info("无权限执行此操作");
                        break;
                    case(408):
                        toastr.info("请求超时");
                        break;
                    default:
                        toastr.info(XMLHttpRequest.responseText);
                }
            }
        });
    }
    //重新绘制tree信息
    function renderTree(){
        $.ajax({
            url: 'http://172.16.202.224:8080/core/module/get_tree/',
            type: 'post',
            dataType: "json",
            data: '',
            async: true,
            contentType: "application/json",
            success: function (response) {
                if (response && response.success == 1) {
                    vm.leftTreeList = response.data;
                    leftTree.refresh(vm.leftTreeList);
                    modalZTree.refresh(vm.leftTreeList);
                    permissionTree.refresh(vm.leftTreeList);
                } else {
                    toastr.info(response.error_msg);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                switch (XMLHttpRequest.status) {
                    case(500):
                        toastr.info('服务器系统内部错误');
                        break;
                    case(403):
                        toastr.info("无权限执行此操作");
                        break;
                    case(408):
                        toastr.info("请求超时");
                        break;
                    default:
                        toastr.info(XMLHttpRequest.responseText);
                }
            }
        });
    }
    //重新绘制table信息
    function renderTable() {
        myTable.refresh('http://172.16.202.224:8080/core/module/get_children_by_module_id/?pid='+ vm.leftTreeName.id)
    }
    //刷新table
    function search() {
        renderTable();
    }
    //添加按钮被点击
    function addBtnClick() {
        //清空 vm.modalData 中的值
        vm.modalData = {                     //模态输入框中的值
            code: '',                        //编号
            name: '',                        //名称
            ParentId: '',                      //父id
            description: '',                 //描述
            target: '',                      //目标 跳转方式
            icon: 'fa fa-folder-o',         //图标
            url: '',                         //地址
            dis_order: null,                 //排序优先级
            is_menu: false,                      //菜单
            is_expand: false,                    //展开
            is_public: false,                    //是否公开
            status: true,                       //当前状态
        };
        vm.modalType = "添加";
        vm.modalData.ParentId = Number(vm.leftTreeName.id);
        $('.table-line-active').removeClass('table-line-active');
        $("#modal").modal('show');
    }
    //编辑按钮被点击
    function editBenClick() {
        if (!vm.modalData.id) {
            toastr.info("编辑时最少需要选中一行!");
            return
        }
        vm.modalType = "编辑";
        $("#modal").modal('show');
    }
    //删除按钮被点击
    function deleteBtnClick() {
        if (!vm.modalData.id) {
            toastr.info("删除时最少需要选中一行!");
            return
        }
        $("#deleteModal").modal('show');
    }
    //功能按钮添加事件
    function permissionBenClick() {
        if (!vm.modalData.id) {
            toastr.info("添加按钮时最少需要选中一行!");
            return
        }
        $("#permissionsModal").modal('show');
    }
    //为列表添加checkBox样式
    function checkBoxFormatter(value, row, index) {
        if (value=='1') {
            return [
                '<div id="check-box" class="open1"><div id="check" class="open2"></div></div>'
            ].join('');
        } else {
            return [
                '<div id="check-box" class="close1"><div id="check" class="close2"></div></div>'
            ].join('');
        }
    }
    //模态确认按钮点击事件
    function add() {
        if (!vm.modalData.code) {
            toastr.info('编号不能为空!');
            return
        }
        if (!vm.modalData.name) {
            toastr.info('名称不能为空!');
            return
        }
        if (!vm.modalData.target || vm.modalData.target == "===请选择===") {
            toastr.info('目标不能为空!');
            return
        }
        if (!vm.modalData.dis_order) {
            toastr.info('排序不能为空!');
            return
        }
        //将模态中的数据深度克隆一份 防止旧值被修改
        var newModalData = copyFun(vm.modalData);
        //dis_order转化为数字
        newModalData.dis_order = Number(vm.modalData.dis_order);
        //checkBox 将转换为 1 0
        vm.modalData.is_menu ? newModalData.is_menu = 1 : newModalData.is_menu = 0;  //菜单
        vm.modalData.is_expand ? newModalData.is_expand = 1 : newModalData.is_expand = 0; //展开
        vm.modalData.is_public ? newModalData.is_public = 1 : newModalData.is_public = 0;     //是否公开
        vm.modalData.status ? newModalData.status = 1 : newModalData.status = 0;      //当前状态
        if (vm.modalType == "添加") {
            ajax('http://172.16.202.224:8080/core/module/add/','POST',newModalData,function (response) {
                $("#modal").modal('hide');
                //获取tree信息 并且绘制
                renderTree();
                //重新 绘制table
                renderTable();
                toastr.success('添加成功');
            })
        } else {
            ajax('http://172.16.202.224:8080/core/module/edit/','POST',newModalData,function (response) {
                $("#modal").modal('hide');
                //获取tree信息 并且绘制
                renderTree();
                //重新 绘制table
                renderTable();
                toastr.success('编辑成功');
            })
        }
    }
    //删除表格中一项
    function deleteTable() {
        ajax('http://172.16.202.224:8080/core/module/del/','POST',{id:vm.modalData.id},function (response) {
            $("#deleteModal").modal('hide');
            //获取tree信息 并且绘制
            renderTree();
            //重新 绘制table
            renderTable();
            toastr.success('删除成功');
        })
    }
    //dom渲染完成后加载
    $(document).ready(function () {
        $(".contentBox").css({"height": $(document.body).height() - 20});
        $(window).resize(function () {//当浏览器大小变化时
            $(".contentBox").css({"height": $(document.body).height() - 20})
        });
        //绘制tree
        getTree();
    });
</script>
</body>
</html>